1 00:00:00,690 --> 00:00:04,020 Hello and welcome to you in this video. 2 00:00:04,020 --> 00:00:08,680 I will be in D.C. assess for our projet. 3 00:00:08,730 --> 00:00:14,120 I've already a reference to this says far inside his team. 4 00:00:14,150 --> 00:00:20,340 So here online line six is a link to where this says far would be. 5 00:00:20,340 --> 00:00:22,140 So this is the name of the file. 6 00:00:22,140 --> 00:00:25,150 So now I have to create the farm. 7 00:00:25,350 --> 00:00:30,400 So click on you new file and save it. 8 00:00:30,560 --> 00:00:38,280 Click see as am going to save it as my style doctor says clicks. 9 00:00:38,820 --> 00:00:42,720 So you can see on the bottom right here it says csx. 10 00:00:43,080 --> 00:00:48,280 Here on the title is say is success dotsie it to save time. 11 00:00:48,300 --> 00:00:52,090 I've already pre staged sets. 12 00:00:52,110 --> 00:00:54,070 I'm just going to add that on. 13 00:00:54,180 --> 00:00:59,920 I'm not going to spend too much time on csx because this is not really a USS Cole. 14 00:00:59,940 --> 00:01:09,600 But I will run through the code with you quickly so let me start from the top here from line 1 to the 15 00:01:09,600 --> 00:01:12,550 line for my e-filing. 16 00:01:12,570 --> 00:01:20,430 He had johore Entire hastier mail so this is same the font size will be 10 pixels. 17 00:01:20,430 --> 00:01:28,320 Background colour is this colour this colour or is it hexadecimal colour which kind of looks like is 18 00:01:28,320 --> 00:01:29,650 sky blue. 19 00:01:29,670 --> 00:01:37,110 Call up or feel free to use whatever colour you like for your background so you could either use a hex 20 00:01:37,120 --> 00:01:46,970 collar I have here or you can actually specify the actual name of the column on line 6. 21 00:01:47,120 --> 00:01:51,410 Got the body element here so listowel I'm applying to. 22 00:01:51,420 --> 00:01:59,790 I'm given a padian of zero and a margin of zero padding basically refers to the space inside the element 23 00:02:00,120 --> 00:02:04,950 margin refers to this base outside element. 24 00:02:05,010 --> 00:02:09,820 So what you're saying says don't forget the opening and curly braces. 25 00:02:09,980 --> 00:02:16,490 And also don't forget to terminate each of the values for the properties you first signed. 26 00:02:16,500 --> 00:02:21,600 Next we've got the hatoon element here so this a point here. 27 00:02:21,600 --> 00:02:23,860 These are the stylin I've given it. 28 00:02:24,150 --> 00:02:32,760 Hey will be heading teich so I pop in to my hastier email here you can see I've got the tag here. 29 00:02:32,850 --> 00:02:34,810 That's what I'm referring to. 30 00:02:35,130 --> 00:02:43,040 So I want the text to be aligned to its centre and the size of the text for each one. 31 00:02:43,110 --> 00:02:46,280 Giving it a 100 pixels. 32 00:02:46,360 --> 00:02:50,790 Mine height give an 8 1 margin from the bottom. 33 00:02:50,810 --> 00:02:54,650 See the saw line 19 here. 34 00:02:54,660 --> 00:03:02,170 This is a class ending where you see a period or a dot that is so close to going to the hastier mail. 35 00:03:02,190 --> 00:03:06,550 This is a class I am referring to which is the span element. 36 00:03:06,600 --> 00:03:09,610 So this is a stylin applied to it. 37 00:03:09,720 --> 00:03:13,270 Give it a little background colour of blue padding. 38 00:03:13,410 --> 00:03:21,120 This is a padding and I meant mine height bodies radials gives it a rounded age and colyar refers to 39 00:03:21,150 --> 00:03:26,390 the collar of the actual text inside that element. 40 00:03:26,580 --> 00:03:29,020 And here will go on the class called Game. 41 00:03:29,040 --> 00:03:34,350 If I go into my hastier mail you can see this is a class I have defined here called key. 42 00:03:34,540 --> 00:03:37,130 So which is the diff. 43 00:03:37,140 --> 00:03:39,920 So that's what I am applying this stylin to. 44 00:03:39,920 --> 00:03:41,990 So these are all basic stylee. 45 00:03:42,240 --> 00:03:44,390 So you've got to with the height. 46 00:03:44,430 --> 00:03:55,710 This plea was fleck's are let's play this flex flex physically is a property that specifies the length 47 00:03:56,160 --> 00:04:06,250 of the item relative to the rest of the flexible items inside the same container. 48 00:04:06,650 --> 00:04:17,250 Online photo what we call a flex wrap and we've got the value of wrap the Flex wrap property is used 49 00:04:17,250 --> 00:04:24,920 to specify whether the flexible items should wrap or not. 50 00:04:25,170 --> 00:04:34,420 So if the elements are not flexible attempt to flex wrap property will have no effect on line 32 got 51 00:04:34,430 --> 00:04:38,400 a margin set to 0 0 to automate. 52 00:04:38,460 --> 00:04:41,840 We automatically assign the margin. 53 00:04:42,000 --> 00:04:44,340 And here we've got another class here called Hall. 54 00:04:44,340 --> 00:04:46,970 If we go into the hastier mail we can see here. 55 00:04:47,230 --> 00:04:49,410 I got a class here called Hall. 56 00:04:49,650 --> 00:04:51,780 So that's what I meant. 57 00:04:51,900 --> 00:04:57,660 Again I'm using the Flex after idea explain what the Flex property does and these are the values of 58 00:04:57,660 --> 00:04:59,850 keeping it overflow busy. 59 00:05:00,000 --> 00:05:03,130 Kelly refroze too there. 60 00:05:03,430 --> 00:05:07,150 What happens if the content of our flaws is elements. 61 00:05:07,150 --> 00:05:07,890 BOX. 62 00:05:08,080 --> 00:05:12,100 So if it overflows it I've told it to hide it. 63 00:05:12,100 --> 00:05:14,940 So the value of giving to that Buffalo is hidden. 64 00:05:15,010 --> 00:05:21,190 And here we have got a position that I've set to relative. 65 00:05:21,250 --> 00:05:28,800 So basically your reality position is relative to its normal position. 66 00:05:28,960 --> 00:05:34,120 So the element is positioned relative to its normal position. 67 00:05:34,150 --> 00:05:35,970 That's what that relative means. 68 00:05:36,250 --> 00:05:47,110 So we've got the whole and then we've got the hall after the after till select online 41 basically inserts 69 00:05:47,270 --> 00:05:55,010 something after the content of each of these selected element or elements that's what that is. 70 00:05:55,180 --> 00:06:04,860 So you could also have the before and before basically is used to insert some before the content. 71 00:06:04,900 --> 00:06:13,000 So these are all what will be inserted after that content this plea will be displayed in block as a 72 00:06:13,000 --> 00:06:14,020 block. 73 00:06:14,250 --> 00:06:19,920 And this is a background colour and this will give the background. 74 00:06:19,960 --> 00:06:25,780 We are specifying an image and this is the location or the name of the image. 75 00:06:25,990 --> 00:06:27,130 And these are the properties. 76 00:06:27,130 --> 00:06:34,080 So we wanted to be built on Centre and we don't want it to repeat throughout the year with the background 77 00:06:34,090 --> 00:06:39,600 size and we setting the value to content or its content. 78 00:06:39,670 --> 00:06:49,030 Here we have the content the content property is used with the before and after sudol element. 79 00:06:49,030 --> 00:06:54,640 So this here after known as this sudol element to you normally use that. 80 00:06:54,840 --> 00:07:01,150 The content property online what it is will go away. 81 00:07:01,150 --> 00:07:09,540 Weve said that we be 100 percent of the pirenne container and the high to be nineteen pixels off the. 82 00:07:09,540 --> 00:07:17,600 Just a normal pixel size whenever you setting percentage it will reflect the the parents and containers 83 00:07:17,640 --> 00:07:22,660 because going to be 100 percent off the parents content here on the right. 84 00:07:22,810 --> 00:07:30,380 Ive just specified a peak value proposition here for setted to be absolute. 85 00:07:30,580 --> 00:07:40,960 So the absolute position of an element is positioned relative to is first positioned system element 86 00:07:41,410 --> 00:07:42,530 as well. 87 00:07:42,820 --> 00:07:52,410 And then he'll 949 we've got the z index z index property physically specifies the stack order of an 88 00:07:52,540 --> 00:08:01,360 element so an element with a great US tax or that is always in front of an element with a large stack 89 00:08:01,510 --> 00:08:02,670 order. 90 00:08:03,430 --> 00:08:06,530 So let's see we've got the height and the weight. 91 00:08:06,540 --> 00:08:17,050 This said a hundred percent of the parent element and here we've got the background image again we don't 92 00:08:17,050 --> 00:08:18,490 know the background image. 93 00:08:18,710 --> 00:08:23,380 And we are using the mall image that's the location. 94 00:08:23,590 --> 00:08:28,420 Again we want the properties from bottom centre but no repeat. 95 00:08:28,420 --> 00:08:35,110 This is the value of the background size position absolute position from the top. 96 00:08:35,110 --> 00:08:43,810 Gives you that with 100 percent height transition transition basically allows you to change property 97 00:08:43,810 --> 00:08:45,540 values smoothly. 98 00:08:45,640 --> 00:08:47,770 All give in duration of time. 99 00:08:47,800 --> 00:08:52,410 So this is the decision I have set or point for second. 100 00:08:52,450 --> 00:08:54,280 And then we've got the button. 101 00:08:54,670 --> 00:08:58,420 This is the button that will basically be the start button. 102 00:08:58,620 --> 00:09:05,890 So these are standard properties we've got to with the font size the height the colour background colour 103 00:09:06,250 --> 00:09:13,110 the body radius gives the around that age margin from the left and then margin from the top. 104 00:09:13,120 --> 00:09:14,880 So I'm just going to save that. 105 00:09:15,010 --> 00:09:23,230 And that concludes our csx and will open up the document and we can just so I double click to open up 106 00:09:23,350 --> 00:09:30,700 our project and this is a project I'm just going to click on this file here to see what it looks like 107 00:09:31,420 --> 00:09:36,010 and you can see this is what the application looks like at the moment. 108 00:09:36,010 --> 00:09:41,400 So it's much more presentable than it was without the CSF. 109 00:09:41,560 --> 00:09:51,880 So we've basically got the structure and the design our set up in the next year we'll start to write 110 00:09:52,090 --> 00:09:57,010 the job as group logic code that will make it all work. 111 00:09:57,010 --> 00:09:58,000 Thanks for watching. 112 00:09:58,060 --> 00:09:59,020 And bye for now.